<template>
    <div id="dispatch">
        <div class="row first">
            <span class="col big">工单信息</span>
            <span class="col" @click="goHome">返回</span>
        </div>
        <div class="row last">
            <div class="col tabs">
                <div class="tab-item" :class="{active:index==tableIndex}" @click="thisTab(index)" v-for="(item,index) in tabs" :key="index" >{{item.name}}</div>
            </div>
            <div class="col btns">
                <div class="dispatch">派单</div>
                <div class="export" @click="exportPdf">导出</div>
                <div class="print" @click="print">打印</div>
                <div class="upload">
                    <input type="file">
                    <span>上传文件</span>
                </div>
            </div>
        </div>
        <div class="live-files">
            <div class="file-item">
                <i class="el-icon-document"></i>
                <span class="underLine">文档:</span>
                <span class="underLine">标准工单.docx</span>
                <span class="btn"> 删除</span>
            </div>
        </div>
        <template v-if="tableIndex==0">
          <div class="tables">
            <div class=" table-item ">
                <div class="inner-wrap">
                    <div class="mainHead old"> <span>宁夏水投中源水务海兴分公司安装抢修派工单</span> </div>
                    <table>
                      <tr>
                        <td class="sm"><span>日期</span></td>
                        <td  colspan="2">
                          <span>时间</span>
                        </td>
                        <td class="middle"><span>用户名</span></td>
                        <td colspan="5"><input type="text" placeholder="用户名"></td>
                      </tr>
                      <tr>
                        <td><span>紧急程度</span></td>
                        <td colspan="2"><input type="text" placeholder="紧急程度"></td>
                        <td><span>联系电话</span></td>
                        <td colspan="4"><input type="tel" placeholder="电话号码"></td>
                      </tr>
                      <tr>
                        <td><span>出勤事由</span></td>
                        <td colspan="2"><input type="text" placeholder="出勤事由"></td>
                        <td><span>处理人</span></td>
                        <td colspan="4"><input type="text" placeholder="处理人"></td>
                      </tr>
                      <tr>
                        <td :rowspan="oldTable.productList.length+2"><span>工程情况</span></td>
                        <td>  <span>序号</span> </td>
                        <td><span>工作内容</span></td>
                        <td class="middle"><span>材料名称</span></td>
                        <td class="sm"><span>单位</span></td>
                        <td class="sm"><span>数量</span></td>
                        <td ><span>备注</span></td>
                        <td><span>操作</span></td>
                      </tr>
                       <tr v-for="(item,index) in oldTable.productList" :key="index">
                        <td >  <span >{{index+1}}</span> </td>
                        <td><input type="text" v-model="item.content" placeholder="工作内容"></td>
                        <td ><input type="text" v-model="item.name"></td>
                        <td ><input type="text" v-model="item.unit"></td>
                        <td ><input type="text" v-model="item.number"></td>
                        <td class="lang"><input type="text" v-model="item.remark"></td>
                        <td class="del"><span @click="old_delThis(index)">删除</span></td>
                      </tr>
                      <tr>
                        <td colspan="7" class="addCol"> <span @click="old_addOne">新增</span></td>
                      </tr>
                      <tr>
                        <td><span>处理结果</span></td>
                        <td colspan="2" class="largeText"> <span class="limitText">0/20</span> <textarea ></textarea></td>
                        <td><span>处理时间</span></td>
                        <td colspan="4">
                           <span>{{oldTable.currentTime}}</span>
                        </td>
            
                      </tr>
                      <tr>
                        <td><span>库存</span></td>
                        <td colspan="2"> <input type="text" placeholder="库存"> </td>
                        <td><span>部门负责人</span></td>
                        <td colspan="4"><input type="text" placeholder="部门负责人"></td>
                      </tr>
                       <tr>
                        <td><span>派工负责人</span></td>
                        <td colspan="2"> <input type="text" placeholder="派工负责人"></td>
                        <td><span>审核人</span></td>
                        <td colspan="4"><input type="text" placeholder="审核人"></td>
                      </tr>
                    </table>
                </div>
            </div>
        </div>
        </template>
        <template v-if="tableIndex==1">
          <div class="tables">
            <div class=" table-item ">
                <div class="inner-wrap">
                     <div class="mainHead">
                    <span>检修派工单</span>
                    </div>
                    <div class="subHead">
                        <div class="col">
                            <span>检修单号:</span>
                            <span>NXST:0010</span>
                        </div>
                        <div class="col">
                            <span>派单时间:</span>
                            <span>2018-06-10 08:25</span>
                        </div>
                    </div>
                    <table>
                        <tr>
                            <td><span>检修地点</span></td>
                            <td><input type="text" placeholder="检修地点"></td>
                            <td><span>最近处理时间</span></td>
                            <td colspan="2">
                               <span>2018-09-10 09:10</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>紧急程度</span></td>
                            <td>
                               <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </td>
                            <td><span>检修类型</span></td>
                            <td colspan="2">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td><span>上报人</span></td>
                            <td><input type="text" placeholder="上报人"></td>
                            <td><span>联系电话</span></td>
                            <td colspan="2"><input type="tel" placeholder="联系电话"></td>
                        </tr>
                        <tr>
                            <td><span>派单人</span></td>
                            <td><input type="text" placeholder="派单人"></td>
                            <td><span>处理人</span></td>
                            <td colspan="2"><input type="text" placeholder="处理人"></td>
                        </tr>
                        <tr>
                            <td><span>隐患描述</span></td>
                            <td colspan="4"><input type="text" placeholder="隐患描述"></td>
                        </tr>
                         <tr>
                            <td><span>检修内容</span></td>
                            <td colspan="4"><input type="text" placeholder="检修内容"></td>
                        </tr>
                        <tr>
                            <td :rowspan="workOrder.productList.length+2"><span>材料清单</span></td>
                            <td><span>材料名称</span></td>
                            <td><span>单位</span></td>
                            <td><span>数量</span></td>
                            <td><span>操作</span></td>
                        </tr>
                        <tr v-for="(item,index) in workOrder.productList" :key="index">
                          <td><input type="text" placeholder="材料名称" v-model="item.name"></td>
                          <td><input type="text" placeholder="单位" v-model="item.unit"></td>
                          <td ><input type="text" placeholder="数量" v-model="item.number"></td>
                          <td class="del"><span @click="workOrder_del(index)">删除</span></td>
                        </tr>
                        <tr>
                          <td colspan="4" class="addCol"><span  @click="workOrder_add">新增</span></td>
                        </tr>
                        <tr>
                            <td><span>派发意见</span></td>
                            <td colspan="4"><span>个</span></td>
                        </tr>
                        <tr class="noBorder">
                            <td colspan="2"> <span>派发部门:vfnbdjaskbv</span> </td>
                            <td colspan="3"> <span>检修部门:部分的设备vnfji</span> </td>
                        </tr>
                        <tr class="noBorder">
                            <td colspan="2"> <span>签字:</span> </td>
                            <td colspan="3"> <span>签字:</span> </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        </template>
        
        <template v-if="tableIndex==2">
          <div class="tables">
            <div class="table-item right-table">
                <div class="inner-wrap">
                     <div class="mainHead">
                    <span>检修反馈单</span>
                    </div>
                    <div class="subHead">
                        <div class="col">
                            <span>检修单号:</span>
                            <span>NXST-0010</span>
                        </div>
                        <div class="col">
                            <span>反馈时间:</span>
                            <span>2018-06-10 08:25</span>
                        </div>
                    </div>
                    <table>
                      <tr>
                        <td><span>检修地点</span></td>
                        <td><input type="text" ></td>
                        <td><span>最近处理时间</span></td>
                        <td colspan="2">
                          <span>2018-09-10 09:10</span>
                        </td>
                      </tr>
                       <tr>
                        <td><span>紧急程度</span></td>
                        <td>
                          <el-select v-model="workOrder.hurrySelect" placeholder="请选择">
                            <el-option
                              v-for="item in workOrder.hurryList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </td>
                        <td><span>检修类型</span></td>
                        <td colspan="2">
                          <el-select v-model="workOrder.typeSelect" placeholder="请选择">
                            <el-option
                              v-for="item in workOrder.typeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </td>
                      </tr>
                      <tr>
                        <td rowspan="3"><span>检修报告</span></td>
                        <td colspan="4"><span>原因分析:</span>  <input  class="inLine" type="text"></td>
                      </tr>
                      <tr>
                        <td colspan="4"><span>处理结果:</span> <input  class="inLine" type="text"> </td>
                      </tr>
                      <tr>
                        <td colspan="4"><span>相关建议:</span>  <input class="inLine" type="text"></td>
                      </tr>
                      <tr>
                        <td :rowspan="feedBack.productList.length+2"><span>材料清单</span></td>
                        <td><span>材料名称</span></td>
                        <td><span>单位</span></td>
                        <td ><span>数量</span></td>
                        <td><span>操作</span></td>
                      </tr>
                       <tr v-for="(item,index) in feedBack.productList" :key="index">
                        <td><input type="text" placeholder="材料名称" v-model="item.name"></td>
                        <td><input type="text" placeholder="单位" v-model="item.unit"></td>
                        <td ><input type="text" placeholder="数量" v-model="item.number"></td>
                        <td class="del"><span @click="feedBack_del(index)">删除</span></td>
                      </tr>
                      <tr>
                        <td colspan="4" class="addCol"><span  @click='feedBack_add'>新增</span></td>
                      </tr>
                      <tr>
                        <td><span>检修评价</span></td>
                        <td colspan="4"><input type="text" placeholder="请输入评价结果"></td>
                      </tr>
                      <tr class="noBorder">
                        <td colspan="2"><span>检修部门:</span></td>
                        <td colspan="3"><span>验收部门:</span></td>
                      </tr>
                       <tr class="noBorder">
                        <td colspan="2"><span>签字:</span></td>
                        <td colspan="3"><span>签字:</span></td>
                      </tr>
                    </table>
                </div>
            </div>
        </div>
        </template>
    </div>
</template>

<script>
export default {
  data() {
    return {
      dateValue: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      tabs: [
        { name: "原有工单" },
        { name: "检修派工单" },
        { name: "检修反馈单" }
      ],
      tableIndex: 0,
      oldTable: {
        time: "",
        user: "",
        level: "",
        tel: "",
        attendance: "",
        doer: "",
        currentTime: "",
        productList: [
          {
            content: "gvdnsjkvbdjs",
            name: "bvdsnjbvkjfdsn",
            unit: "米",
            number: "12",
            remark: "vnbdsjkbvks"
          },
          {
            content: "gvdnsjkvbdjs",
            name: "bvdsnjbvkjfdsn",
            unit: "米",
            number: "12",
            remark: "vnbdsjkbvks"
          },
          {
            content: "gvdnsjkvbdjs",
            name: "bvdsnjbvkjfdsn",
            unit: "米",
            number: "12",
            remark: "vnbdsjkbvks"
          },
          {
            content: "gvdnsjkvbdjs",
            name: "bvdsnjbvkjfdsn",
            unit: "米",
            number: "12",
            remark: "vnbdsjkbvks"
          },
          {
            content: "gvdnsjkvbdjs",
            name: "bvdsnjbvkjfdsn",
            unit: "米",
            number: "12",
            remark: "vnbdsjkbvks"
          }
        ]
      },
      workOrder: {
        address: "",
        hurryList: [
          {
            value: "1",
            label: "紧急"
          },
          {
            value: "2",
            label: "较急"
          },
          {
            value: "3",
            label: "一般"
          }
        ],
        hurrySelect: "",
        typeList: [
          {
            value: "1",
            label: "爆管抢修"
          },
          {
            value: "2",
            label: "爆管抢修"
          },
          {
            value: "3",
            label: "爆管抢修"
          }
        ],
        typeSelect: "",
        dangerDesc: "",
        repireContent: "",
        productList: [
          {
            name: "哈夫节",
            unit: "套",
            number: "12"
          },
          {
            name: "哈夫节",
            unit: "套",
            number: "12"
          },
          {
            name: "哈夫节",
            unit: "套",
            number: "12"
          }
        ]
      },
      feedBack: {
        address: "",
        hurryList: [
          {
            value: "1",
            label: "紧急"
          },
          {
            value: "2",
            label: "较急"
          },
          {
            value: "3",
            label: "一般"
          }
        ],
        hurrySelect: "",
        typeList: [
          {
            value: "1",
            label: "爆管抢修"
          },
          {
            value: "2",
            label: "爆管抢修"
          },
          {
            value: "3",
            label: "爆管抢修"
          }
        ],
        analysis: "",
        result: "",
        advise: "",
        productList: [
          {
            name: "哈夫节",
            unit: "套",
            number: "12"
          },
          {
            name: "哈夫节",
            unit: "套",
            number: "12"
          },
          {
            name: "哈夫节",
            unit: "套",
            number: "12"
          }
        ]
      }
    };
  },
  beforeDesdivoy() {
    this.$router.push({ name: "pipe_monitor_earlyWarning" });
    this.$store.commit("setAside_status", true);
    this.$emit("showAside");
  },
  methods: {
    goHome() {
      this.$router.push({ name: "pipe_monitor_earlyWarning" });
      this.$store.commit("setAside_status", true);
      this.$emit("showAside");
    },
    print() {
      let that = this;
      let table = "";
      let index = this.tableIndex;
      switch (index) {
        case 0:
          table = JSON.stringify(that.oldTable);
          sessionStorage.setItem("table", table);
          break;
        case 1:
          table = JSON.stringify(that.workOrder);
          sessionStorage.setItem("table", table);
          break;
        case 2:
          table = JSON.stringify(that.feedBack);
          sessionStorage.setItem("table", table);
          break;
      }
      window.open("../../../static/print.html?index=" + that.tableIndex);
    },
    exportPdf(){
      window.open('../../../static/monitor_earlyWarning/makePdf.html?name="抢修派工单"')
    },
    old_delThis(index) {
      this.oldTable.productList.splice(index, 1);
    },
    old_addOne() {
      this.oldTable.productList.push({
        content: "",
        name: "",
        unit: "",
        number: "",
        remark: ""
      });
    },
    thisTab(index) {
      this.tableIndex = index;
    },
    workOrder_add() {
      this.workOrder.productList.push({
        name: "",
        unit: "",
        number: ""
      });
    },
    workOrder_del(index) {
      this.workOrder.productList.splice(index, 1);
    },
    feedBack_add() {
      this.feedBack.productList.push({
        name: "",
        unit: "",
        number: ""
      });
    },
    feedBack_del(index) {
      this.feedBack.productList.splice(index, 1);
    }
  },
  beforeMount() {
    let that = this;
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = "";
    let second = "";
    var self = this;
  },
  created() {}
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
input {
  display: inline-block;
  height: 30px;
  width: 100%;
  border: none;
  padding-left: 5px;
}
textarea {
  border: none;
  width: 100%;
}
#dispatch {
  width: 100%;
  height: 100%;
  background: #ccc;
  .row.first {
    width: 100%;
    height: 40px;
    background: #ccc;
    display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 14px;
    span {
      display: inline-block;
      padding: 5px 10px;
      position: absolute;
      bottom: 0;
      background: blue;
      color: #fff;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      cursor: pointer;
      &:first-child {
        left: 20px;
      }
      &:last-child {
        right: 20px;
      }
    }
  }
  .row.last {
    width: 100%;
    height: 30px;
    padding: 0 20px;
    background: rgb(202, 238, 202);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .tabs {
      width: 300px;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #333;
      font-weight: 600;
      font-size: 16px;
      .tab-item {
        height: 100%;
        line-height: 30px;
        cursor: pointer;
        &.active {
          color: red;
          border-bottom: 2px solid red;
        }
      }
    }
    .btns {
      width: 240px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      div {
        display: inline-block;
        // width: 80px;
        padding: 4px 8px;
        background: blue;
        position: relative;
        text-align: center;
        margin-right: 10px;
        border-radius: 3px;
        color: #fff;
        cursor: pointer;
      }
      .upload {
        span {
          display: inline-block;
          height: 100%;
          width: 100%;
        }
        input {
          display: inline-block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          z-index: 100;
        }
      }
    }
  }
  .live-files {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: #fff;
    padding-left: 20px;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    .file-item {
      height: 30px;
      line-height: 30px;
      .underLine {
        text-decoration: underline;
      }
      .btn {
        font-size: 12px;
        padding: 2px 5px;
        border: 1px solid blue;
        border-radius: 5px;
        color: blue;
        cursor: pointer;
      }
    }
  }
  .tables {
    width: 100%;
    height: calc(100% - 120px);
    padding: 0 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    .table-item {
      width: 800px;
      height: 100%;
      .inner-wrap {
        width: 100%;
        height: 100%;
        background: #fff;
        font-size: 14px;
        padding: 0 10px;
        overflow-y: auto;
        .mainHead {
          font-size: 16px;
          line-height: 40px;
          text-align: center;
          font-weight: 600;
          border-bottom: 1px solid #ccc;
          &.old {
            border-bottom: none;
          }
        }
        .subHead {
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #666;
        }
        table {
          width: 100%;
          border-spacing: 0;
          border-collapse: collapse;
          border-top: 1px solid #ccc;
          margin-bottom: 20px;
          tr {
            border: 1px solid #ccc;
            border-top: none;
            &.noBorder {
              border: none;
              td {
                padding-left: 20px;
                border-right: none;
                text-align: center;
              }
            }
            td {
              min-height: 40px;
              line-height: 40px;
              text-align: center;
              border-right: 1px solid #ccc;
              text-align: center;
              &.sm {
                width: 80px;
              }
              .inLine {
                width: calc(100% - 76px);
                display: inline-block;
              }
              &.lang {
                width: 140px;
              }
              &.middle {
                width: 100px;
              }
              &.largeText {
                padding: 0 5px;
                position: relative;
                .limitText {
                  position: absolute;
                  bottom: 10px;
                  right: 10px;
                }
                textarea {
                  margin-top: 10px;
                  height: 50px;
                  resize: none;
                }
              }
              &.addCol {
                span {
                  padding: 0 5px;
                  line-height: 20px;
                  border: 1px solid blue;
                  border-radius: 5px;
                  cursor: pointer;
                }
              }
              &.del {
                color: #333;
                font-size: 12px;
                span {
                  padding: 0 5px;
                  line-height: 20px;
                  border: 1px solid blue;
                  border-radius: 5px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>


